<!DOCTYPE html>
<html>
  <head>
    <title>Test that restoring a valid matrix after aplying non-invertible doesn't collapse all path to 0,0.</title>
  </head>
  <body>
  	<canvas id='canvas0' width='100' height='100'></canvas>
    <canvas id='canvas1' width='100' height='100'></canvas>
    <canvas id='canvas2' width='100' height='100'></canvas>
    <canvas id='canvas3' width='100' height='100'></canvas>
    <canvas id='canvas4' width='100' height='100'></canvas>
    <canvas id='canvas5' width='100' height='100'></canvas>
    <canvas id='canvas6' width='100' height='100'></canvas>
    <canvas id='canvas7' width='100' height='100'></canvas>
    <script>
      var canvas0 = document.getElementById('canvas0');
      var canvas1 = document.getElementById('canvas1');
      var canvas2 = document.getElementById('canvas2');
      var canvas3 = document.getElementById('canvas3');
      var canvas4 = document.getElementById('canvas4');
      var canvas5 = document.getElementById('canvas5');
      var canvas6 = document.getElementById('canvas6');
      var canvas7 = document.getElementById('canvas7');
      var ctx0 = canvas0.getContext('2d');
      var ctx1 = canvas1.getContext('2d');
      var ctx2 = canvas2.getContext('2d');
      var ctx3 = canvas3.getContext('2d');
      var ctx4 = canvas4.getContext('2d');
      var ctx5 = canvas5.getContext('2d');
      var ctx6 = canvas6.getContext('2d');
      var ctx7 = canvas7.getContext('2d');

      // Testing moveTo.
      ctx0.moveTo(80,80);
      ctx0.lineTo(20,80);
      ctx0.save();
      ctx0.setTransform(0,0,0,0,0,0);
      ctx0.moveTo(50,50);
      ctx0.restore();
      ctx0.lineTo(20,80);
      ctx0.stroke();

      // Testing lineTo.
      ctx1.moveTo(80,80);
      ctx1.lineTo(20,80);
      ctx1.save();
      ctx1.scale(0,0);
      ctx1.lineTo(80,20);
      ctx1.restore();
      ctx1.stroke();

      // Testing quadraticCurveTo.
      ctx2.moveTo(80,80);
      ctx2.lineTo(20,80);
      ctx2.save();
      ctx2.setTransform(0,0,0,0,0,0);
      ctx2.quadraticCurveTo(20,20,80,20);
      ctx2.restore();
      ctx2.stroke();

      // Testing bezierCurveTo.
      ctx3.moveTo(80,80);
      ctx3.lineTo(20,80);
      ctx3.save();
      ctx3.scale(0,0);
      ctx3.bezierCurveTo(20,20,80,80,80,20);
      ctx3.restore();
      ctx3.stroke();

      // Testing arcTo.
      ctx4.moveTo(80,80);
      ctx4.lineTo(20,80);
      ctx4.save();
      ctx4.setTransform(0,0,0,0,0,0);
      ctx4.arcTo(20,20,80,20,60);
      ctx4.restore();
      ctx4.stroke();

      // Testing lineTo with non-invertible, non-0 scale.
      ctx5.moveTo(80,80);
      ctx5.lineTo(20,80);
      ctx5.save();
      ctx5.scale(0,1);
      ctx5.lineTo(80,20);
      ctx5.restore();
      ctx5.stroke();

      // Testing lineTo with non-invertible, non-0 scale.
      ctx6.moveTo(80,80);
      ctx6.lineTo(20,80);
      ctx6.save();
      ctx6.scale(1,0);
      ctx6.quadraticCurveTo(20,20,80,20);
      ctx6.restore();
      ctx6.stroke();

      // Different way to go from a non-infertible CTM to an invertible one.
      ctx7.scale(0,0); // Non-invertible.
      // These will both be maped to 0,0.
      ctx7.moveTo(10,10);
      ctx7.lineTo(20,20);
      // Now we go back to a inverible matix (identity).
      ctx7.setTransform(1,0,0,1,0,0);
      ctx7.lineTo(20,80);
      ctx7.lineTo(80,80);
      ctx7.stroke();

    </script>
  </body>
</html>
